<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
    <title>预约详情</title>
</head>
<link rel="stylesheet" type="text/css" href="css/public.css" />
<link rel="stylesheet" type="text/css" href="css/iconfont.css">
<script src="js/jquery1.42.min.js"></script>
<script src="js/TouchSlide.1.1.source.js"></script>
<body class="appoint-detail">

<!--头部-->
<!--<header >
    <div class="title"><a class="nav-btn" href="index.html"></a><span>详情页面</span></div>
</header>-->

<!--预约 -->
<div class="appointpage">
    <!--list-->
    <a class="appoint-wrap" href="appointdetail.html">
        <div class="appoint-img-wrap">
            <img src="img/drama11.jpg"/>
        </div>
        <div class="appoint-name-wrap">
            <div class="name-title"><p>布达拉宫风云</p><p><span></span><i>预计60min</i></p></div>
           <!-- <p class="name-summary ellipsis">古今中外的话剧演出都是借助于舞台完成的。</p>-->
        </div>

        <div class="appoint-extra-wrap">
            <span class="selling-price">￥10.00</span>
            <!--<span class="original-price">￥150.00</span>-->
            <div>
                <span>已预约：6</span><span>剩余：2</span>
            </div>
        </div>
    </a>
</div>

<!--角色简介-->
<div class="appoint-detail-info">
    <h1 class="detail-info-title">角色简介</h1>
    <!-- 本例主要代码 Start ================================ -->
   <div class="appoint-role">
       <div id="TabBox" class="tabBox">
       <!--    <div class="hd">
               <ul>
                   <li><a>国内</a></li>
                   <li><a>国际</a></li>
                   <li><a>时事</a></li>
               </ul>
           </div>-->
           <div class="bd">
               <ul>
                  <div class="role-box">
                      <div class="pic">
                          <img src="img/role1.png"/>
                      </div>
                      <div class="role-summary">
                          <h1 class="name">奕木</h1>
                          <p>如玉君子，万鬼不侵，皆避而远之。</p>
                      </div>
                  </div>
               </ul>
               <ul>
                   <div class="role-box">
                       <div class="pic">
                           <img src="img/role2.png"/>
                       </div>
                       <div class="role-summary">
                           <h1 class="name">稚武彦命</h1>
                           <p>不怒自威，面色冷漠，双眼古并无波，让人如坠冥河。</p>
                       </div>
                   </div>
               </ul>
               <ul>
                   <div class="role-box">
                       <div class="pic">
                           <img src="img/role3.png"/>
                       </div>
                       <div class="role-summary">
                           <h1 class="name">水野遥</h1>
                           <p>一颦一笑皆动人。</p>
                       </div>
                   </div>
               </ul>
           </div>
       </div>
   </div>
    <script type="text/javascript">TouchSlide({ slideCell:"#TabBox" });</script>
    <!-- 本例主要代码 End ================================ -->
</div>


<!--详情-->
<div class="appoint-detail-info">
    <h1 class="detail-info-title">故事简介</h1>
    <p class="detail-info-content">柳州城有个云鹤山庄，云青鹤是当地的商业大户。但是传闻云家受到诅咒，云老爷生不出男孩。终于有一天，云夫人诞下两位男孩，云府上下庆祝。多年后，两位少爷已经长大，在云老爷80大寿的今天，准备分配巨额的遗产，结果当天柴房失火，惊现一具无头尸体。

        百变山庄的一封神秘邀请函，向世界侦探排名前五的侦探发起了挑战。

        突如其来的命案，神秘主人的身份，挑战背后的秘密，封印在山庄的故事，等待你的揭晓。</p>
    <div style="height: 100px"></div>
</div>


<footer class="footer">
   <!-- <span class="nav-item iconfont icon-dianhua1" id="tel">电话</span>-->
    <span class="nav-item">￥10</span>
    <button class="extra-btn" id="appointBtn">立即预约</button>
</footer>

<!--遮罩层 start-->
<div class="fullscreen"></div>
<div class="modal">
    <p>15688888888</p>
    <p class="cancel" id="cancel">取消</p>
</div>
<!--遮罩层 end-->
<script>

    $(function(){
        /*弹框显示*/
        $("#tel").click(function(){
            $(".fullscreen").fadeIn() ;
            $(".modal").fadeIn() ;
        }) ;

        /*弹框隐藏*/
        $(".cancel").click(function(){
            $(".fullscreen").fadeOut();
            $(".modal").fadeOut();
        })

        $("#appointBtn").click(function(){
            window.location.href = "appointorder.html" ;
        })
    })

</script>
</body>